<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item
      v-for="item in curmbList"
      :key="item.name"
      :to="{ name: item.name }"
      >{{ item.label }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>

<script>
import { routes } from '@/router'
import { mapMutations } from 'vuex'
export default {
  data() {
    this.routesMap = new Map() // 初始化的key-value的map对象
    this.initRoutesMap(routes)
    return {
      curmbList: []
    }
  },
  methods: {
    ...mapMutations(['updateCurrentPath']),
    initRoutesMap(routes) {
      routes.forEach((route) => {
        this.routesMap.set(route.name, route.label)
        if (route.children) {
          this.initRoutesMap(route.children)
        }
      })
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        // 切换路由的时候，报存vuex的currentpath
        this.updateCurrentPath(route.path)
        this.curmbList = route.matched.map((item) => {
          return {
            name: item.name,
            label: this.routesMap.get(item.name)
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss"></style>
